<template>
  <view class="home-page">
    <view class="top">
      <view class="banner-section">
        <image :src="banners.image" mode="scaleToFill" />
      </view>

      <view class="user-info-section">
        <view class="user-detail">
          <view class="avatar">
            <image :src="userInfo.avatar" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="nickname">我的积分:{{ userInfo.points }}</view>
            <view class="points"> 积分可兑换优惠就券及周边</view>
            <view class="phone">183****1923</view>
          </view>
        </view>
        <view class="qrcode-section">
          <vue-qr value="Hello, World!" :options="{ width: 50 }"></vue-qr>
          <!-- <vue-qr :text="qrcodeVal" :size="280" :callback="getImgInfo"></vue-qr> -->
          <!-- text属性绑定了要转换成二维码的文本内容，size设定了二维码的大小，而callback则是在二维码生成后执行的回调函数。 -->
          <view class="copy"> 会员码 </view>
        </view>
      </view>
    </view>

    <!-- 点餐方式选择 -->
    <view class="order-type-section">
      <view class="order-type-item">
        <view class="icon">
          <image :src="orderImg.active" mode="aspectFill"></image>
        </view>
        <view class="text">门店自取</view>
      </view>

      <view class="order-type-item">
        <view class="icon">
          <image :src="orderImg.noActive" mode="aspectFill"></image>
        </view>
        <view class="text">外卖点单</view>
      </view>
    </view>

    <!-- 功能区域 -->
    <view class="balance-section">
      <view class="balance-item">
        <view class="value">5</view>
        <view class="label">团购优惠</view>
      </view>
      <view class="balance-item">
        <view class="value">168.30</view>
        <view class="label">会员充值</view>
      </view>
      <view class="balance-item">
        <view class="value">324</view>
        <view class="label">积分商城</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import vueQr from "@chenfengyuan/vue-qrcode";
import { ref, onMounted } from "vue";
import { getBanner } from "@/api/banner.js";
import Mock from "mockjs";
onMounted(() => {
  //
  getBanner().then((res) => {
    // console.log("res", res);
    banners.value = res.data;
  });
});
// 头像
const avatar = ref("https://picsum.photos/100/100");
// 轮播图数据
const banners = ref({});

// 用户信息
const userInfo = ref(
  Mock.mock({
    avatar: "https://picsum.photos/100/100",
    nickname: "@cname",
    phone: '@string("number", 11)',
    points: "@integer(1000, 30000)",
  })
);

// 点餐方式选择图片
const orderImg = Mock.mock({
  active: "https://picsum.photos/36/36?random=1",
  noActive: "https://picsum.photos/36/36?random=2",
});
</script>


<style lang="scss">
page {
  height: 100%;
}
.home-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 30rpx;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: #333;
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;

    // border: 1px solid #000000;
    height: 800rpx;
    .banner-section {
      height: 600rpx;
      width: 100%;
      border-radius: 16rpx;
      // margin: 20rpx;
      image {
        width: 100%;
        height: 600rpx;
      }
    }

    /* 用户信息区域 */
    .user-info-section {
      height: 150rpx;
      width: 70%;
      border: 1px solid #000000;
      position: relative;
      bottom: 100rpx;
      background: linear-gradient(135deg, #4a6572 0%, #336699 100%);
      padding: 40rpx 30rpx;
      margin: 20rpx;
      // margin-top: 700rpx;
      border-radius: 16rpx;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

      .user-detail {
        display: flex;
        align-items: center;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
          margin-right: 30rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          .nickname {
            font-size: 30rpx;
            font-weight: 600;
            margin-bottom: 10rpx;
          }

          .points {
            font-size: 26rpx;
            opacity: 0.9;
            margin-bottom: 10rpx;
          }

          .phone {
            font-size: 24rpx;
            opacity: 0.7;
          }
        }
      }
      .qrcode-section {
        display: flex;
        align-items: center;
        flex-direction: column;

        .copy {
          font-size: 30rpx;
        }
      }
    }
  }

  /* 点餐方式选择 */
  .order-type-section {
    display: flex;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .order-type-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 0;
      position: relative;
      transition: all 0.3s ease;

      &.active {
        background-color: #f0f9ff;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 6rpx;
          background-color: #131415;
          border-radius: 3rpx;
        }

        .text {
          color: #336699;
          font-weight: 600;
        }
      }

      .icon {
        width: 70rpx;
        height: 70rpx;
        margin-bottom: 15rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  /* 功能区域 */
  .balance-section {
    display: flex;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 30rpx 0;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .balance-item {
      flex: 1;
      text-align: center;
      position: relative;
      transition: transform 0.2s ease;

      &:active {
        transform: scale(0.95);
      }

      &:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1rpx;
        background-color: #eee;
      }

      .value {
        font-size: 40rpx;
        font-weight: bold;
        color: #336699;
        margin-bottom: 10rpx;
      }

      .label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
